<template>
  <div>
    <div>
      <el-button v-if="lock" type="primary" size="small" @click="addParams" v-text="buttonValue"></el-button>
    </div>
    <el-form :inline="true" class="demo-form-inline param-items">
      <ul>
        <li v-for="(param, index) in params" :key="index" class="item">
          <el-form-item label-width="120px" label="">
            <el-input :readonly="!lock" v-model="param.name" width="120px" placeholder="name" class="name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="param.type" class="type" :disabled="!lock">
              <el-option label="text" value="text"></el-option>
              <el-option label="file" value="file"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="param.isRequire" class="is-require" :disabled="!lock">
              <el-option label="非必需" :value="false"></el-option>
              <el-option label="必需" :value="true"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="param.example" :readonly="!lock" placeholder="参数示例" class="example"></el-input>
          </el-form-item>
          <el-form-item label-width="120px" label="">
            <el-input :readonly="!lock" v-model="param.remark" placeholder="备注" class="remark"></el-input>
          </el-form-item>
          <el-button v-if="lock" type="primary" icon="el-icon-delete" @click="deleteParam(index)"></el-button>
        </li>
      </ul>
    </el-form>
  </div>

</template>

<script>
export default {
  name: "edit-params",
  props: {
    formParams: {
      type: Array,
      default: null
    },
    getFormParams: {
      type: Array,
      default: null
    },
    buttonValue: {
      type: String
    },
    isLock: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {};
  },
  computed: {
    params () {
      if (this.formParams) {
        return this.formParams;
      } else {
        return this.getFormParams;
      }
    },
    lock () {
      return !!this.isLock
    }
  },
  methods: {
    deleteParam (index) {
      this.$emit('deleteParam', this.params, index);
    },
    addParams () {
      this.$emit('addParams', this.params);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/home/content/params";
</style>
